<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: flex;
      }

      .item {
        width: 100px;
        height: 100px;
        margin: 0 10px;
        background-color: green;
        color: red;
        font-size: 26px;
      }
    </style>
  </head>

  <body>
    <!-- 
      v-if 与 v-show 的区别：

        两者都是 Vue 中的指令，用于控制元素or组件是否可见。
        区别在与：
          v-if 是真正的条件渲染，条件为真，元素会被创建并渲染出来。
                               条件为假，元素会被销毁掉
          v-show 只是在简单的控制元素的 CSS 样式

          v-if 是惰性的，当初始条件为假时，元素不会默认创建出来，而 v-show 不管初始条件为真还是假，都会创建出元素

          v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
          如果有频繁的切换显示需求，使用 v-show 会更合适。其余使用 v-if 即可。

          v-if 有配套的 v-else 和 v-else-if 。v-show 没有配套的指令
          v-if 可以配合 template 元素使用。v-show 不可以。

     -->

    <div id="app">
      <div v-if="isShow" style="padding: 10px; background-color: green">
        V-IF
      </div>

      <hr />

      <div v-show="isShow" style="padding: 10px; background-color: green">
        V-SHOW
      </div>

      <div v-if="type === 'A'">A</div>
      <div v-else-if="type === 'B'">B</div>
      <div v-else-if="type === 'C'">C</div>
      <div v-else>Not A/B/C</div>

      <div class="box">
        <!-- 根据 isShow 同时控制ItemA 与ItemB
          1. 将 v-if 在两个元素上都编写一下
              不太建议，比较繁琐，如果有100个元素的话，需要写 100 次 v-if

          2. 使用一个元素做包装，然后将 v-if 使用在包装元素上
              1. 普通元素
                  可能会引起样式问题
              2. template 元素  【推荐】
                  不会在页面上出现多余的元素，也就不会引起样式问题
        -->
        <template v-if="isShow">
          <div class="item">ItemA</div>
          <div class="item">ItemB</div>
        </template>
        <div class="item">ItemC</div>
      </div>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            isShow: true,

            type: "A",
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
